<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>品优购 - 优质！优质！</title>
    <link rel="stylesheet" href="./css/linwai_common.css">
    <link rel="stylesheet" href="./css/page-item.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/xzoom.css">
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/jquery.cookie.js"></script>
</head>

<body>
    <!-- 快捷导航模块 -->
    <div class="shortcut">
        <div class="w">
            <div class="left">
                <ul>
                    <li>品优购欢迎您!&nbsp;</li>
                    <li>
                        <a href="login.html">请登录</a>&nbsp;<a href="register.html" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购
                        <div><img src="./upload/wxm.png" alt=""></div>
                    </li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- header 头部 -->
    <div class="header w">
        <!-- logo 模块-->
        <div class="logo logo1">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 列表页的秒杀模块 -->
        <div class="sk">
            <img src="images/秒杀.png" alt="">
        </div>
        <!-- 搜索框 模块-->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>

            <!-- 下拉效果 -->
            <div class="popup">
                <div class="flex_container">
                    <a href="list.html" class="pop_item margin">
                        <img src="./upload/phone1.png" alt="">
                        <span>HUAWEI P系列</span>
                    </a>
                    <a href="#" class="pop_item margin">
                        <img src="./upload/phone2.png" alt="">
                        <span>HUAWEI Mate系列</span>
                    </a>
                    <a href="#" class="pop_item margin">
                        <img src="./upload/phone3.png" alt="">
                        <span>HUAWEI Nova系列</span>
                    </a>
                    <a href="#" class="pop_item hight">秋冬女装</a>
                    <a href="#" class="pop_item hight">秋冬大码女装</a>
                    <a href="#" class="pop_item hight">秋冬女鞋</a>
                    <a href="#" class="pop_item hight">秋冬围脖</a>
                    <a href="#" class="pop_item hight">秋冬礼物</a>
                    <a href="#" class="pop_item hight">秋冬女朋友</a>
                </div>
            </div>
        </div>
        <!-- hotwords 模块 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">每满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通讯</a>
        </div>
        <!-- 购物车 模块 -->
        <div class="shopcar">
            <a href="cart.html">购物车</a>
            <i class="count">0</i>
        </div>
    </div>
    <!-- nav 模块制作 -->
    <nav class="nav">
        <div class="w">
            <div class="sk_list">
                <ul>
                    <li><a href="#">品优秒杀</a></li>
                    <li><a href="#">即将售罄</a></li>
                    <li><a href="#">超值低价</a></li>
                </ul>
            </div>
            <div class="sk_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">女鞋</a></li>
                    <li><a href="#">男装</a></li>
                    <li><a href="#">男鞋</a></li>
                    <li><a href="#">母婴童装</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#" class="style_red">智能数码</a></li>
                    <li><a href="#">户外运动</a></li>
                    <li><a href="#">更多分类</a></li>
                </ul>
            </div>
        </div>
    </nav>






    <!-- 中间部分 -->
    <div class="main">
        <div class="py-container">
            <div class="crumb-wrap">
                <ul class="sui-breadcrumb">
                    <li><a href="#">手机、数码、通讯</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">Apple苹果</a></li>
                    <li class="active">iphone 6S系类</li>
                </ul>
            </div>
            <!--product-info-->
            <div class="product-info">
                <div class="fl preview-wrap">
                    <!--放大镜效果-->
                    <div class="zoom">
                        <!--默认第一个预览-->
                        <div class="productsFig">
                            <div id="preview" class="spec-preview">
                                <img class="xzoom" xoriginal="uploads/b1.png" src="upload/s1.png" width="100%">
                            </div>

                            <div class="mask"></div>
                            <div class="big">
                                <img class="bigImg" xoriginal="uploads/b1.png" src="upload/s1.png" width="100%">
                            </div>
                        </div>

                        <!--下方的缩略图-->
                        <div class="spec-scroll">
                            <a><img class="xzoom-gallery" src="upload/s1.png" width="60"></a>
                            <a><img class="xzoom-gallery" src="upload/s2.png" width="60"></a>
                            <a><img class="xzoom-gallery" src="upload/s3.png" width="60"></a>
                            <a><img class="xzoom-gallery" src="upload/s1.png" width="60"></a>
                            <a><img class="xzoom-gallery" src="upload/s2.png" width="60"></a>
                            <span class="prev"><</span>
                            <span class="next">></span>
                        </div>
                    </div>
                </div>
                <div class="fr itemInfo-wrap">
                    <div class="sku-name">
                        <h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
                    </div>
                    <div class="summary">
                        <div class="summary-wrap">
                            <div class="fl title"><i>价　　格</i></div>
                            <div class="fl price"><i>¥</i><em>5299.00</em> <s>降价通知</s></div>
                            <div class="fr remark"><i>累计评价</i><em>612188</em></div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title"><i>促　　销</i></div>
                            <div class="fl price">
                                <span>加价购</span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，<br />即可在购物车换购热销商品
                                <a href="#">详情》</a>
                            </div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="summary-wrap">
                            <div class="fl title"><i>支　　持</i></div>
                            <div class="fl fix-width"><em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title"><i>配 送 至</i></div>
                            <div class="fl fix-width"><em class="t-gray">北京海淀区中关<i class="iconfont"></i>有货 支持 99元免运费
                                    |货到付款 |211限时达 </em></div>
                            <div class="fl express"><em
                                    class="t-gray">由自营发货，并提供售后服务。11:00前完成下单，预计<strong>今天（09月19日）送达</strong></em></div>
                        </div>
                    </div>
                    <div class="clearfix choose">
                        <div id="specification" class="summary-wrap clearfix">
                            <dl>
                                <dt class="fl title"><i>选择颜色</i></dt>
                                <dd>
                                    <a href="javascript:;" class="selected">金色</a>
                                    <a href="javascript:;">银色</a>
                                    <a href="javascript:;">黑色</a>
                                    <a href="javascript:;">玫瑰金</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt class="fl title"><i>选择版本</i></dt>
                                <dd>
                                    <a href="javascript:;" class="selected">公开版</a>
                                    <a href="javascript:;">移动4G</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt class="fl title"><i>内存容量</i></dt>
                                <dd>
                                    <a href="javascript:;" class="selected">16G</a>
                                    <a href="javascript:;">64G</a>
                                    <a href="javascript:;">128G</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt class="fl title"><i>购买方式</i></dt>
                                <dd>
                                    <a href="javascript:;" class="selected">官方标配</a>
                                    <a href="javascript:;">移动优惠购</a>
                                    <a href="javascript:;">电信优惠购</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt class="fl title"><i>套　　装</i></dt>
                                <dd>
                                    <a href="javascript:;" class="selected">保护套装</a>
                                    <a href="javascript:;">充电套装</a>
                                </dd>
                            </dl>
                        </div>

                        <div class="summary-wrap">
                            <div class="controls">
                                <input autocomplete="off" type="text" value="1" minnum="1" class="itxt">
                                <a href="javascript:;" class="increment plus">+</a>
                                <a href="javascript:;" class="increment mins">-</a>
                            </div>
                            <a href="javascript:;" class="sui-btn  btn-danger addshopcar">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--product-detail-->
            <div class="clearfix product-detail">
                <div class="fl aside">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="javascript:;" data-toggle="tab"><span>相关分类</span></a>
                        </li>
                        <li>
                            <a href="javascript:;" data-toggle="tab"><span>推荐品牌</span></a>
                        </li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div id="index" class="tab-pane active">
                            <ul class="part-list unstyled">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="goods-list unstyled">
                                <li>
                                    <div class="p-img"><img src="upload/mobile.png"></div>
                                    <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                                    <div class="price"><strong>￥6888</strong></div>
                                    <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                                </li>
                                <li>
                                    <div class="p-img"><img src="upload/mobile.png"></div>
                                    <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                                    <div class="price"><strong>￥6888</strong></div>
                                    <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                                </li>
                                <li>
                                    <div class="p-img"><img src="upload/mobile.png"></div>
                                    <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                                    <div class="price"><strong>￥6888</strong></div>
                                    <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                                </li>
                            </ul>
                        </div>
                        <div id="profile" class="tab-pane">
                            <p>推荐品牌</p>
                        </div>
                    </div>
                </div>
                <div class="fr detail">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active"><a href="#one" data-toggle="tab"><span>商品介绍</span></a></li>
                        <li><a href="#two" data-toggle="tab"><span>规格与包装</span></a></li>
                        <li><a href="#three" data-toggle="tab"><span>售后保障</span></a></li>
                        <li><a href="#four" data-toggle="tab"><span>商品评价</span></a></li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div id="one" class="tab-pane active">
                            <ul class="goods-intro unstyled">
                                <li>分辨率：1920*1080(FHD)</li>
                                <li>后置摄像头：1200万像素</li>
                                <li>前置摄像头：500万像素</li>
                                <li>核 数：其他</li>
                                <li>频 率：以官网信息为准</li>
                                <li>品牌： Apple</li>
                                <li>商品名称：APPLEiPhone 6s Plus</li>
                                <li>商品编号：1861098</li>
                                <li>商品毛重：0.51kg</li>
                                <li>商品产地：中国大陆</li>
                                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                <li>系统：苹果（IOS）</li>
                                <li>像素：1000-1600万</li>
                                <li>机身内存：64GB</li>
                            </ul>
                            <div class="intro-detail">
                                <img src="upload/intro01.png">
                                <img src="upload/intro02.png">
                                <img src="upload/intro03.png">
                            </div>
                        </div>
                        <div id="two" class="tab-pane">
                            <p>规格与包装</p>
                        </div>
                        <div id="three" class="tab-pane">
                            <p>售后保障</p>
                        </div>
                        <div id="four" class="tab-pane">
                            <div class="comment">
                                <div class="com-tit">商品评价</div>
                                <div class="com-percent">好评率<span class="percent">96%</span></div>
                                <div class="com-tab-type">
                                    <ul class="type">
                                        <li class="current"><a href="#">全部评价(123456)</a></li>
                                        <li><a href="#">晒图(500)</a></li>
                                        <li><a href="#">追评(500)</a></li>
                                        <li><a href="#">好评(500)</a></li>
                                        <li><a href="#">中评(500)</a></li>
                                        <li><a href="#">差评(500)</a></li>
                                    </ul>
                                    <div class="content">
                                        <div class="com-item">
                                            <div class="user-column">
                                                <div class="username">
                                                    <img src="upload/photo.jpg">用户****1
                                                </div>
                                                <div class="usernum">品享值258698</div>
                                            </div>
                                            <div class="user-info">
                                                <div class="stars star4"></div>
                                                <p>手机还不错，可以的可以的</p>
                                                <div class="guige">
                                                    <ul class="mini">
                                                        <li>玫瑰金</li>
                                                        <li>标配版</li>
                                                        <li>2017-11-02 13:23</li>
                                                    </ul>
                                                    <div class="operate">
                                                        <span id="collect"><i class="sui-icon icon-tb-like"></i>
                                                            325</span>
                                                        <span id="comment"><i class="sui-icon icon-tb-wang"></i>
                                                            256</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro2">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>极速物流</h4>
                                <p>急速物流，急速送达</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro  intro3">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>无忧售后</h4>
                                <p>7天无理由退换货</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro4">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>特色服务</h4>
                                <p>私人定制家电套餐</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro intro5">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>帮助中心</h4>
                                <p>您的购物指南</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="./upload/wxm.png">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->



    <!--购物车单元格 模板-->
    <script type="text/template" id="tbar-cart-item-template">
        <div class="tbar-cart-item">
            <div class="jtc-item-promo">
                <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
                <div class="promo-text">已购满600元，您可领赠品</div>
            </div>
            <div class="jtc-item-goods">
                <span class="p-img"><a href="#"><img src="{2}" alt="{1}" height="50" width="50"></a></span>
                <div class="p-name">
                    <a href="#">{1}</a>
                </div>
                <div class="p-price"><strong>¥{3}</strong>×{4} </div>
                <a class="p-del" href="#">删除</a>
            </div>
        </div>
    </script>

    <script>
        // $(function ($) {
        //     $('.xzoom, .xzoom-gallery').xzoom({
        //         tint: '#888',
        //         Xoffset: 15
        //     })
        // })


        // 放大镜
        window.addEventListener('load', function () {
            var productsFig = document.querySelector('.productsFig')
            var mask = document.querySelector('.mask')
            var big = document.querySelector('.big')
            //1.当我们鼠标经过productsFig 的时候显示和隐藏 mask遮挡层 和big 大盒子
            productsFig.addEventListener('mouseover', function () {
                mask.style.display = 'block'
                big.style.display = 'block'

            })
            productsFig.addEventListener('mouseout', function () {
                mask.style.display = 'none'
                big.style.display = 'none'

            })
            //2.鼠标移动的时候，让黄色的盒子跟着鼠标来走
            productsFig.addEventListener('mousemove', function (e) {
                //（1）.先计算出鼠标在盒子内的坐标
                var x = e.pageX - this.offsetLeft
                var y = e.pageY - this.offsetTop
                // console.log(x, y);
                //（2）减去盒子高度 300的一半 是150 就是我们mask的最终left 和top值了

                //（3）我们mask 移动的距离
                var maskX = x - mask.offsetWidth / 2
                var maskY = y + -mask.offsetHeight / 2
                //(4)如果x 坐标小于了0 就让他停在0的位置
                //遮挡层的最大移动距离
                var maskMax = productsFig.offsetWidth - mask.offsetWidth
                if (maskX <= 0) {
                    maskX = 0
                } else if (maskX >= maskMax) {
                    maskX = maskMax
                }
                if (maskY <= 0) {
                    maskY = 0
                } else if (maskY >= maskMax) {
                    maskY = maskMax
                }

                mask.style.left = maskX + 'px'
                mask.style.top = maskY + 'px'
                //大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
                //大图
                var bigImg = document.querySelector('.bigImg')
                //大图片的移动距离
                var bigImgMax = bigImg.offsetWidth - big.offsetWidth
                //大图片的移动距离 x y
                var bigX = maskX * bigImgMax / maskMax
                var bigY = maskY * bigImgMax / maskMax

                bigImg.style.left = -bigX + 'px'
                bigImg.style.top = -bigY + 'px'


            })
        })


        $(function () {
            // 点击小图切换大图片
            $('.spec-scroll img').on('click', function () {
                console.log($(this).attr('src'));
                $('.productsFig img').attr('src', $(this).attr('src'));
                $(this).addClass('fdj_red').parent().siblings().find('img').removeClass('fdj_red');
            })
        })





        // 登录状态
        $(function () {
            // 获取cookie
            var nowCookie = $.cookie('username');
            if (nowCookie) {
                $('.shortcut .left li').eq(1).find('a').eq(0).text(nowCookie + '已登录!');
            }
        })


        // 下拉菜单
        $(function () {
            // 下拉菜单
            $('.search .popup a[href="list.html"]').mousedown(function () {
                window.location = 'list.html';
            })

            // 聚焦时
            $('.search input').focus(function () {
                $('.search .popup').slideDown();
            }).blur(function () {
                $('.search .popup').slideUp();
                // return false;
                // console.log('hhhh');
            })
        })




        // 获取购物车数量
        $(function () {
            // 购物车数量
            var count = $.cookie('gwc_num');
            if (count) {
                $('.shopcar .count').text(count);
            }
            else {
                $('.shopcar .count').text('0');
            }
        })





        // 选择效果
        $(function () {
            var $dls = $('#specification dl');
            // 颜色选择
            $dls.eq(0).find('a').on('click', function () {
                console.log('hhhh');

                $(this).addClass('selected').siblings().removeClass('selected');
            })
            // 版本选择
            $dls.eq(1).find('a').on('click', function () {
                $(this).addClass('selected').siblings().removeClass('selected');
            })
            //内存容量
            $dls.eq(2).find('a').on('click', function () {
                $(this).addClass('selected').siblings().removeClass('selected');
            })
            //购买方式
            $dls.eq(3).find('a').on('click', function () {
                $(this).addClass('selected').siblings().removeClass('selected');
            })
            //套餐
            $dls.eq(4).find('a').on('click', function () {
                $(this).addClass('selected').siblings().removeClass('selected');
            })
        })



        // 数量加减
        //添加进购物车
        $(function () {
            // 加
            $('.choose .summary-wrap .plus').click(function () {
                var count = parseInt($('.choose .summary-wrap input').val());
                count++;
                // console.log(count);
                $('.choose .summary-wrap input').val(count);
            })

            // 减
            $('.choose .summary-wrap .mins').click(function () {
                var count = parseInt($('.choose .summary-wrap input').val());
                if (count > 1) {
                    count--;
                }
                // console.log(count);
                $('.choose .summary-wrap input').val(count);
            })


            // var num = $('.shopcar .count').text();

            // 添加进购物车
            $('.choose .summary-wrap .addshopcar').click(function () {
                // 获取购物车数量的值，存进cookie
                var num = $('.shopcar .count').text();
                $.cookie('gwc_num', num, { path: '/', expires: 10 })

                // 获取将要添加进购物车的数量
                var count = $('.choose .summary-wrap input').val();
                num = parseInt(num) + parseInt(count);
                $.cookie('gwc_num', num, { path: '/', expires: 10 })


                // 更新购物车数量
                var count = $.cookie('gwc_num');
                $('.shopcar .count').text(count);
            })


        })


        // 相关分类与推荐品牌切换
        $(function(){
            $('.product-detail .aside .sui-nav li').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                var $deils = $('.tab-content .tab-pane');
                var index = $('.product-detail .aside .sui-nav li').index(this);
                if(index == 0){
                    $deils.eq(0).addClass('active').siblings().removeClass('active');
                }
                else{
                    $deils.eq(1).addClass('active').siblings().removeClass('active');
                }
            })
        })



        // 右侧切换
        $(function(){
            $('.product-detail .detail .sui-nav li').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                var $deils = $('.detail .tab-content .tab-pane');
                var index = $('.product-detail .detail .sui-nav li').index(this);
                if(index == 0){
                    $deils.eq(0).addClass('active').siblings().removeClass('active');
                }
                else if(index == 1){
                    $deils.eq(1).addClass('active').siblings().removeClass('active');
                }
                else if(index == 2){
                    $deils.eq(2).addClass('active').siblings().removeClass('active');
                }
                else if(index == 3){
                    $deils.eq(3).addClass('active').siblings().removeClass('active');
                }
            })
        })
    </script>
</body>

</html>